<template>
    <view>
        <!-- pages/index/address/city/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarBg="navbarBg" :navbarData="navbarData"></navber>

        <!-- 搜索框 -->
        <view class="search">
            <view class="search-layer">
                <view class="search-input">
                    <input placeholder="请输城市名称进行搜索" @input="keywordInput" @confirm="confirmInput" />
                </view>
                <view class="search-img" @tap="confirmInput">
                    <image :src="imgUrl + '/imgs/search.png'"></image>
                </view>
            </view>
            <view class="search-res" v-if="resData.length > 0">
                <view class="search-res-item" @tap="selectCity($event, { city: item })" :data-city="item" v-for="(item, index) in resData" :key="index">{{ item }}</view>
            </view>
        </view>

        <!-- 当前城市 -->
        <view class="then-city" id="then-city">
            <view class="then-city-title">选择城市：</view>
            <view class="then-city-name">{{ addressInfo.city }}</view>
        </view>

        <!-- 热门 -->
        <view class="hot" id="hot-city">
            <view class="hot-title">热门城市</view>
            <view class="hot-city">
                <view class="hot-city-list" @tap="selectCity($event, { city: '北京' })" data-city="北京">北京</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '上海' })" data-city="上海">上海</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '广州' })" data-city="广州">广州</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '重庆' })" data-city="重庆">重庆</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '天津' })" data-city="天津">天津</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '长沙' })" data-city="长沙">长沙</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '成都' })" data-city="成都">成都</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '大连' })" data-city="大连">大连</view>
                <view class="hot-city-list" @tap="selectCity($event, { city: '杭州' })" data-city="杭州">杭州</view>
            </view>
        </view>

        <!-- 城市 -->
        <view class="city">
            <view class="city-layer" v-for="(child, index) in cityData" :key="index">
                <view class="city-title" :id="'city-' + child.title">{{ child.title }}</view>

                <view class="city-list">
                    <view
                        class="city-list-item"
                        @tap="selectCity($event, { city: child_item })"
                        :data-city="child_item"
                        v-for="(child_item, index1) in child.lists"
                        :key="child_item.index1"
                    >
                        {{ child_item }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 右边导航 -->
        <view class="right-nav">
            <view @tap="letterSelect($event, { let: 'hot' })" data-let="hot">热门</view>
            <view @tap="letterSelect($event, { let: item })" :data-let="item" v-for="(item, index) in let" :key="index">{{ item }}</view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/index/address/city/index.js
const cityJson = require('../../../../utils/sys-city.js');

const app = getApp();

const Config = require('../../../../config/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                navbarBg: 'linear-gradient(180deg, #ffeabf 0%, #ffdd9c 100%);',
                title: '切换城市' //顶部标题
            },

            //导航栏
            imgUrl: Config.imgUrl,

            //图片url
            addressInfo: {
                nation: '',
                //国
                province: '',
                //省
                city: '贵阳市',
                //市
                district: '',
                //区
                street: '',
                //街道
                street_number: '' //门牌
            },

            //定位地址
            cityData: [],

            keyword: '',

            //关键字
            resData: [],

            //搜索结果
            scrollHeight: 0,

            //滚动高度
            let: {
                A: 'A',
                B: 'B',
                C: 'C',
                D: 'D',
                E: 'E',
                F: 'F',
                G: 'G',
                H: 'H',
                I: 'I',
                J: 'J',
                K: 'K',
                L: 'L',
                M: 'M',
                N: 'N',
                O: 'O',
                P: 'P',
                Q: 'Q',
                R: 'R',
                S: 'S',
                U: 'U',
                V: 'V',
                W: 'W',
                X: 'X',
                Y: 'Y',
                Z: 'Z'
            },

            navbarBg: '',

            child: {
                title: '',
                lists: []
            },

            child_item: {
                index1: ''
            }
        };
    },
    onLoad() {
        this.setData({
            cityData: cityJson.default.city,
            addressInfo: app.globalData.addressInfo
        });
    },
    onPageScroll(e) {
        this.setData({
            scrollHeight: e.scrollTop
        });
    },
    methods: {
        keywordInput(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //地址输入
            this.setData({
                keyword: e.detail.value
            });
            this.confirmInput();
        },

        confirmInput(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //确定搜索
            var keyword = this.keyword;

            if (keyword == '') {
                this.setData({
                    resData: []
                });
                return;
            }

            var res = [];
            var json = this.cityData; //数据

            json.forEach(function (item, index) {
                item.lists.forEach(function (item1, index1) {
                    if (item1.indexOf(keyword) != -1) {
                        res[res.length] = item1;
                    }
                });
            });
            this.setData({
                resData: res
            });
        },

        selectCity(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //选择地址
            var _this = this;

            uni.showModal({
                title: '切换城市',
                content: '是否确定切换城市',
                success: function (res) {
                    if (res.confirm) {
                        app.globalData.addressInfo.city = e.currentTarget.dataset.city;

                        _this.setData({
                            addressInfo: app.globalData.addressInfo,
                            resData: []
                        });

                        uni.pageScrollTo({
                            scrollTop: 0,
                            duration: 300
                        });
                        uni.navigateBack();
                    }
                }
            });
        },

        letterSelect(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //字母选择-跳转
            var bl = e.currentTarget.dataset.let;
            var idName = '';

            if (bl == 'hot') {
                //热门
                idName = '#hot-city';
            } else {
                //字母
                idName = '#city-' + bl;
            }

            var _this = this;

            uni.pageScrollTo({
                selector: idName,
                duration: 500,

                success() {
                    //矫正位置
                    uni.pageScrollTo({
                        scrollTop: _this.scrollHeight - 130,
                        duration: 100
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
